{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{% static 'js/canvas-bg/canvas/ball.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/canvas-bg/canvas/utils.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/login.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
    {% block header_css %}{% endblock %}
    {% block header_js %}{% endblock %}
</head>
<body>
{% block header %}

{% endblock %}

<div class="login-page">
    <canvas id="canvas" style="background: rgba(53, 114, 206, 0.8);"></canvas>
    <div class="login-model">
        {% block form_model %}{% endblock %}
        <!-- 使用第三方登录 -->
        <div class="other-login">
            <div class="title text-center">
                <span class="line"></span>
                <span class="txt">使用合作网站账号快速登录</span>
                <span class="line"></span>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3 text-center">
                    <a href="javascript:void(0);">
                        <dl>
                            <dt><img src="{% static 'images/qq_login.jpg' %}"/></dt>
                            <dd>QQ登录</dd>
                        </dl>
                    </a>
                </div>
                <div class="col-md-3 col-sm-3 text-center">
                    <a href="javascript:void(0);">
                        <dl>
                            <dt><img src="{% static 'images/wx_login.jpg' %}"/></dt>
                            <dd>微信登录</dd>
                        </dl>
                    </a>
                </div>
                <div class="col-md-3 col-sm-3 text-center">
                    <a href="javascript:void(0);">
                        <dl>
                            <dt><img src="{% static 'images/xinlang_login.jpg' %}"/></dt>
                            <dd>新浪登录</dd>
                        </dl>
                    </a>
                </div>
                <div class="col-md-3 col-sm-3 text-center">
                    <a href="javascript:void(0);">
                        <dl>
                            <dt><img src="{% static 'images/github.jpeg' %}" width="54"/></dt>
                            <dd>GitHub登录</dd>
                        </dl>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


{% block footer %}{% endblock %}
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?0154ede7b05a5c681ecdf6b8a4ebeed7";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>